<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<script type="text/javascript" src="../header.js"></script>
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<title>Example 10: Sticky tables</title>
	</head>
	<body>
		<!-- tables inside this DIV could have draggable content -->
		<div id="drag">	
			<div id="left">
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
				
				<br/>
				<br/>
		
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
		
				<br/>
				<br/>
		
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
				
				<br/>
				<br/>
		
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
		
				<br/>
				<br/>
		
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
				
				<br/>
				<br/>
		
				<table>
					<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
					<tbody>
						<tr><td></td><td></td><td></td></tr>
						<tr><td></td><td><div class="drag">A</div></td><td></td></tr>
						<tr><td></td><td></td><td></td></tr>
					</tbody>
				</table>
			</div>
	
			<!-- right container -->
			<div id="right">

					<div id="sticky_table">
						<table>
							<colgroup><col width="100"/><col width="100"/><col width="100"/></colgroup>
							<tbody>
								<tr><td><div class="drag">B</div></td><td></td><td></td></tr>
								<tr><td><div class="drag">B</div></td><td></td><td></td></tr>
								<tr><td></td><td></td><td></td></tr>
							</tbody>
						</table>
					</div>
					<!-- scrollable DIV container -->
					<div id="scrollable">
						<table>
							<colgroup><col width="100"/><col width="100"/></colgroup>
							<tbody>
								<tr><td></td><td></td></tr>
								<tr><td><div class="drag">C</div></td><td></td></tr>
								<tr><td><div class="drag">C</div></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
								<tr><td></td><td></td></tr>
							</tbody>
						</table>
					</div><!-- drag container -->

			</div><!-- right -->
		</div><!-- div drag -->
	</body>
</html>